<script setup>
import { reactive, defineProps, ref } from 'vue'
import { imageIntroduction } from '@/public/index'
import AliIcon from '@/components/AliIcon/index.vue'
const props = defineProps({
    type: {
        type: String,
        default: () => 'home'
    }
});
// 变量
const state = reactive({
    routerList: [{
        "path": "/pages/tabbar/index",
        name: 'home',
        img: 'HomePage-grey',
        imgAt: 'HomePage-color',
        text: '首页'
    }, {
        "path": "/pages/tabbar/order",
        name: 'order',
        img: 'Goods-grey',
        imgAt: 'Goods-color',
        text: '订单'
    }, {
        "path": "/pages/tabbar/user",
        name: 'user',
        img: 'User-grey',
        imgAt: 'User-color',
        text: '我的'
    }]
})
const statusBottomHeight = ref(0);
uni.getSystemInfo({
    success: function (info) {
        // 获取安全区域的 bottom 值，单位px
        let safeBottom = info.safeAreaInsets.bottom;
        statusBottomHeight.value = uni.upx2px(100) + safeBottom;
    }
});
/**
 * @property  所有请求以api开头 如:apiDataInfo	
 * */


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
const changeTabbarIndex = (item) => {
    // 跳转页面
    uni.switchTab({
        url: item.path,
    })
}
/**
 * @property 生命周期
 */


</script>
<template>
    <div style="width: 100%; bottom:0; z-index: 10;" class="fixed bg-[#fff]" :style="{
        height: statusBottomHeight + 'px'
    }">
        <div style="width: 100%; height: 100rpx;" class="frb bg-f">
            <div v-for="item in state.routerList" :key="item.name" class="fc flex-col" style="width: 20%;"
                @click="changeTabbarIndex(item)">
                <!-- <img :src="item.name === props.type ? imageIntroduction(item.imgAt) : imageIntroduction(item.img)"
                    alt="" style="width: 40rpx; height: 40rpx;"> -->
                    <AliIcon :icon-name="item.name === props.type ?item.imgAt : item.img" size="45" />
                <text class="font-size-24 mt-0.5" :style="{ color: item.name === props.type ? '#00BD78' : '#A7A7A7' }">
                    {{ item.text }}
                </text>
            </div>
        </div>

    </div>

</template>
<style lang="scss" scoped></style>